<template>
	<view>
		<!--基础信息-->
		<view class="cont-box pl24 pb24 pt24 pr24">
			<u--form :model="form" labelWidth="180upx" labelPosition="left">
				<view class="form-col">
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">姓名</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place" v-model="form.userName"
									placeholder="请输入收货人姓名"></input>
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">手机号</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place" v-model="form.userPhone"
									placeholder="请输入收货人手机号"></input>
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--省市区-->
						<view class="inp-row relative">
							<view class="inp-title">省市区</view>
							<view class="inp-content">
								<picker mode="multiSelector" @columnchange="addressColumnchange" @change="addressChange"
									:range="addressListData">
									<view :class="form.mapAddress?'haveAddress my-fs':'noneAddress my-fs'">
										{{form.mapAddress?form.mapAddress:'请选择'}}
									</view>

								</picker>
							</view>
							<view class="absolute fhy-icon">
								<image style="width:40upx;height:42upx;" src="../../../static/fhy.png"></image>
							</view>

						</view>
					</view>
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row relative" style="border-bottom:0;">
							<view class="inp-title">详细地址</view>
							<view class="inp-content">
								<input @click="$go('newaddress/map/map')" class="inp-cls"
									placeholder-class="inp-cls-place" v-model="form.mapAddressDetail"
									placeholder="请输入小区/写字楼"></input>
							</view>
							<view class="absolute dt-icon">
								<image style="width:22upx;height:24upx;" src="../../../static/dt.png"></image>
							</view>
						</view>

					</view>
					<view v-if="param.is_save==1" class="row-box wbg last_row">
						<!--switch-->
						<view class="inp-row">
							<view class="inp-title">保存到地址簿</view>
							<view class="inp-content">
								<u-switch :activeValue="1" :inactiveValue="0" v-model="form.is_save"></u-switch>
							</view>
						</view>

					</view>
				</view>

			</u--form>
		</view>
		<view class="add-box">
			<u-tabbar inactiveColor="#fff" :border="false">
				<u-tabbar-item @click="submitBtn" text="提交"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import chinaAddress from "../../../utils/citydata";
	export default {

		data() {
			return {
				form: {
					id: "",
					"userName": "",
					"userPhone": "",
					"mapAddress": "",
					"mapAddressDetail": "",
					"is_save": 0
				},
				act_row: {},
				idx: [0],
				cont_name: "user",
				chinaAddress: [], // 全国省市区
				addressListData: [], // 全国省市区
				addressSelectListData: [0, 0, 0], // 当前选择的省市区 index
				param: {},
			}
		},
		mounted() {
			this.chinaAddress = chinaAddress;
			this.getProvince();
		},
		onLoad(e) {
			this.param = e;
			if (e.type == 1) {
				uni.setNavigationBarTitle({
					title: "添加卸货地址"
				})
			}
			if (!e.is_save) {
				uni.setNavigationBarTitle({
					title: "添加地址簿"
				})
			}
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			// 获取全国省份list
			getProvince() {
				const chinaAddress = this.chinaAddress;
				const provinceListData = [];
				for (const province_key in chinaAddress) {
					provinceListData.push(chinaAddress[province_key].label);
				}
				this.addressListData[0] = provinceListData;
				// 默认加载第一个省份的城市
				this.getCity(provinceListData[0]);
			},
			// 根据省份获取城市
			getCity(province) {
				// 获取省份对象
				const chinaAddress = this.chinaAddress;
				const chinaAddress_Item = chinaAddress.find((item) => {
					return item.label === province;
				});
				// 获取城市list
				const cityChildren = chinaAddress_Item.children;
				if (!cityChildren) {
					// 如果省份没有市区 清空上次的市区和区域数据
					this.addressListData[1] = "";
					this.addressListData[2] = "";
					return;
				}
				// 解析城市list
				const cityListData = [];
				for (const city_key in cityChildren) {
					cityListData.push(cityChildren[city_key].label);
				}
				this.addressListData[1] = cityListData;
				// 默认加载第一个省份的第一个城市的区域
				this.getCounty(province, cityListData[0]);
			},
			// 根据省份和城市 获取区域
			getCounty(province, city) {
				// 获取省份对象
				const chinaAddress = this.chinaAddress;
				const chinaAddress_Item = chinaAddress.find((item) => {
					return item.label === province;
				});
				// 获取城市list
				const cityChildren = chinaAddress_Item.children;

				// 根据城市获取区域
				const cityChildren_item = cityChildren.find((item) => {
					return item.label === city;
				});

				// 解析区域list
				const countyListData = [];
				if (cityChildren_item.children) {
					for (const county_key in cityChildren_item.children) {
						countyListData.push(cityChildren_item.children[county_key].label);
					}
				} else {
					countyListData.push(cityChildren_item.label);
				}
				this.addressListData[2] = countyListData;
			},
			// 区域更新
			addressColumnchange(e) {
				const {
					column,
					value
				} = e.detail;
				this.addressSelectListData[column] = value;
				// 当前选择的节点地址
				const selectItem = this.addressListData[column][value];
				if (column === 0) {
					// 根据省份获取城市
					this.getCity(selectItem);
				} else if (column === 1) {
					// 获取当前城市的省份
					const province = this.addressListData[0][this.addressSelectListData[0]];
					// 根据省份和城市获取区域
					if (selectItem) {
						this.getCounty(province, selectItem);
					}
				}
				this.$forceUpdate();
			},
			// 区域确定
			addressChange(e) {
				const {
					value
				} = e.detail;
				// 获取省、市、区
				let province = this.addressListData[0][value[0]] || "";
				let city = this.addressListData[1][value[1]] || "";
				let county = this.addressListData[2][value[2]] || "";

				// 拼接页面显示的地址链接
				const addressListStr = [];
				if (province) {
					addressListStr.push(province);
				}
				if (city) {
					addressListStr.push(city);
				}
				if (county) {
					addressListStr.push(county);
				}
				this.form.mapAddress = addressListStr.join("");
				this.$forceUpdate();

			},
			getInfo() {
				var param = this.param;
				if (param.id != undefined) {
					uni.setNavigationBarTitle({
						title: "编辑地址簿"
					})
					var id = param.id;
					this.$api["get"]("user/get-details", {
						showLoding: 1,
						id: id
					}).then(res => {
						if (res.code == 200) {
							this.form = res.data.address;
							this.form.id = res.data.id;
							this.form.title = res.data.title;
						}
					});
				} else {
					this.form = this.$store.getters.addDelive;
				}

			},

			submitBtn() {
				if(this.form.userName==""||this.form.userName==undefined){
					this.$toast({title:"请输入姓名"});
					return;
				}
				if(this.form.userPhone==""||this.form.userPhone==undefined){
					this.$toast({title:"请输入手机号"});
					return;
				}
				//保存数据
				//console.log(this.form.mapAddressDetail,"====mapAddressDetail====");
				if(this.form.mapAddressDetail==""||this.form.mapAddressDetail==undefined){
					this.$toast({title:"请输入地址详情"});
					return;
				}
			//	return;
				if (this.param.is_save == undefined || this.form.is_save == 1) {
					var url = "user/save-raddress";
					var title = this.form.mapAddress;
					var form = {
						title: title + this.form.mapAddressDetail,
						id: this.form.id,
						address: JSON.stringify({
							mapAddress: title,
							mapAddressDetail: this.form.mapAddressDetail,
							receiveAddressDetail: this.form.receiveAddressDetail,
							longitude: this.form.longitude,
							latitude: this.form.latitude,
							userName: this.form.userName,
							userPhone: this.form.userPhone
						})
					};
					if (this.mapAddressDetail == "") {
						this.$toast({
							title: "输入详细地址"
						})
						return;
					}
					//console.log(form,"===form===");
					//return;
					this.$api["post"](url, form).then(res => {

						if (res.code == 200) {
							this.form = {
								id: "",
								"userName": "",
								"userPhone": "",
								"mapAddress": "",
								"mapAddressDetail": "",
								"is_save": 0
							}
							this.$toast({
								title: "保存成功"
							})
							var _this = this;
							setTimeout(function() {
								if (_this.is_user) {
									_this.$go("newaddress/book?is_user=1");
								} else {
									_this.$go("newaddress/book");
								}

							}, 1000);
						} else {
							this.$toast({
								title: res.msg
							})
						}
					});
				}
				if (this.param.is_save == 1) {
					
					var pam = {
						userPhone: this.form.userPhone,
						userName: this.form.userName,
						mapAddress: this.form.mapAddress
					};

					if (this.param.type == 1) {
						var idx = this.param.idx ? 0 : this.param.idx;
						var deliveAddress = this.$store.getters.deliveAddress;
						//deliveAddress[idx] = pam;
						this.$store.commit("getDelive", [deliveAddress]);
					} else {
						this.$store.commit("getReceive", pam);
					}
					this.form = {
						id: "",
						"userName": "",
						"userPhone": "",
						"mapAddress": "",
						"mapAddressDetail": "",
						"is_save": 0
					}
					uni.navigateTo({
						url: "/pages/index/index"
					})


				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.line-box {
		background: #F6F6F6;
		height: 24upx;
	}

	.cont-box {
		overflow: hidden;
		border-radius: 16upx;
	}

	.form-box,
	.row-box {
		padding: 5upx 20upx;
	}

	.noneAddress {
		font-size: 28upx;
		font-weight: 400;
		color: #86837c;
		//color: #cdcdcd;
	}

	.tip-box {
		background: #fff;
		padding-left: 20upx;
		padding-top: 20upx;
		margin-bottom: 120upx;
	}

	.submitView {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.submitBtn {
		border-radius: 0;
	}

	.title {
		padding: 20upx;
		font-size: 36upx;
	}

	.row-content-box {

		/deep/.u-form-item__body__left,
		/deep/.u-form-item__body__right,
		/deep/.u-form-item__body {
			display: block !important;
			width: 100% !important;
		}

	}

	.onimg-text-area,
	.order_jetimg-text-area,
	.bodyimg-text-area {
		/deep/.u-form-item__body__left {
			padding-bottom: 30upx;
		}
	}

	.u-page__upload-item {
		width: 100%;
		overflow: hidden;

		.img-left-box,
		.img-right-box {
			width: 48%;
			float: left;
			text-align: center;
		}

		.img-mid-box {
			width: 48%;
			margin: 0 auto;
			text-align: center;
		}

		.img-right-box {
			float: right;
		}
	}

	/deep/ .u-upload__wrap {
		width: 100% !important;
		display: block !important;
	}

	.up-box {
		width: 100%;
		min-height: 260upx;
		/*  background: #EFEFEF;*/
		overflow: hidden;
		border-radius: 8upx;
		position: relative;
		color: #999999;

		.up-img {
			width: 100%;
			height: 260upx;
			border-radius: 8upx;
		}
	}

	.up-icon-box {
		text-align: center;
		width: 100%;
		margin-top: 30upx;

		/deep/ .u-icon--right {
			flex-direction: column !important;
		}
	}

	.order_jetimg-text-area {

		/deep/.u-form-item__body__right__content,
		/deep/.u-form-item__body__right__content__slot {
			display: block !important;
		}
	}

	.text-tip {
		text-align: center;
	}

	.text-bottom {
		position: absolute;
		bottom: 0;
		/* color: #fff;
       background: #04A0E2;*/
		width: 100%;
		text-align: center;
		padding: 15upx 0;
	}

	.remark-line {
		height: 20upx;
		background: #F8F8F8;
	}

	.order_jetimg-line {
		height: 80upx;
		width: 100%;
		background: #fff;
	}

	.popup-box {
		width: 90%;
		margin: 20upx auto;

	}

	.popup-title-box {
		text-align: center;
		padding: 30upx 20upx;
	}

	.cBlack {
		color: #afafaf
	}

	.demo-layout-box {
		overflow: hidden;
		width: 25%;
		float: left;
	}

	.lay-img {
		width: 100%;
		height: 160upx;
	}

	.inp-row {
		padding: 24upx 0;
		overflow: hidden;
		border-bottom: 2upx solid #f0f0f0;
		position: relative;

		.inp-title {
			width: 250upx;
			float: left;
			font-size: 29upx;
		}


		.inp-content {
			float: right;

			.inp-cls {
				font-size: 23upx;
			}

		}

		.icon-box {
			position: absolute;
			right: 11upx;
			top: 32upx;
			width: 11upx;
			height: 20upx;
		}
	}

	.my-fs {
		font-size: 23upx;
		padding-right: 46upx;
	}

	.my-fr {
		float: right !important;
		padding-right: 26upx;
	}

	.xz-box {
		text-align: right;
	}

	.last_row .inp-row {
		border-bottom: 0 !important;
	}

	.form-col {
		overflow: hidden;
		border-radius: 16upx;
	}

	.dt-icon {
		width: 22upx;
		height: 24upx;
		right: 5upx;
	}

	.fhy-icon {
		width: 40upx;
		height: 42upx;
		top: 20upx;
		right: 5upx;
	}
</style>